<template>
  <view :catchtouchmove="true">
    <view class="coupon-list-window" :class="show === true ? 'on' : ''" :catchtouchmove="true">
      <view class="title">
        优惠券
        <!-- <text class="iconfont icon-guanbi" @click="close"></text> -->
      </view>
      <scroll-view scroll-y style="height: 550rpx; padding-bottom: 50rpx" :catchtouchmove="true">
        <view class="coupon-list" v-if="coupon.length > 0">
          <view class="item acea-row row-center-wrapper" v-for="(item, couponpopIndex) in coupon" :key="couponpopIndex"
            @click="getCouponUser(item)">
            <view class="money" v-if="item.couponType === 1">
              <text>
                <text class="f24">￥</text>
                <text class="num">{{ item.couponAmount }}</text>
              </text>
              <text class="tips" v-if="item.minOrderAmount">满{{ item.minOrderAmount }}可用</text>
              <text class="tips" v-else>无门槛</text>
            </view>
            <view class="money" v-if="item.couponType === 2">
              <text>
                <text class="num">{{ item.couponAmount }}</text>
                <text class="f24">折</text>
              </text>
              <text class="tips" v-if="item.minOrderAmount">满{{ item.minOrderAmount }}可用</text>
              <text class="tips" v-else>无门槛</text>
            </view>
            <view class="money" v-if="item.couponType === 3">
              <text>
                <text class="num">兑换券</text>
              </text>
            </view>
            <view class="text">
              <view class="condition line1">{{ item.couponName }}</view>
              <view class="data acea-row row-between-wrapper">
                <view v-if="item.validDateType === 3">永久有效</view>
                <!-- <view v-if="item.validDateType === 2">领取后{{ item.validDays }}天有效</view> -->
                <view v-if="item.validDateType === 1 || item.validDateType === 2">{{ item.useStartTime | filterDay }}-{{ item.useEndTime | filterDay
                  }}
                </view>
                <view class="bnt acea-row row-center-wrapper"
                  :class="couponObj && couponObj.id === item.id ? 'gray' : 'bg-color-red'">{{
                    couponObj && couponObj.id === item.id ? '已使用' : '待使用' }}</view>
              </view>
            </view>
          </view>
        </view>
        <!--无优惠券-->
        <view class="pictrue" v-else>
          <image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
        </view>
      </scroll-view>
    </view>
    <view class="mask" :hidden="show === false" :catchtouchmove="true" @touchmove.prevent @click="handleAction(false)">
    </view>
  </view>
</template>
<script>
import dayjs from 'dayjs';
export default {
  name: 'CouponPop',
  props: {
    couponObj: {
      type: Object,
      default: () => null
    },
    coupon: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      show: false,
    }
  },
  filters: {
    filterDay(time) {
      return dayjs(time).format('YYYY/MM/DD')
    }
  },
  methods: {
    handleAction(value = false) {
      this.show = value
    },
    getCouponUser(item) {
      console.log(this.couponObj, item)
      if (!this.couponObj || this.couponObj && item.id != this.couponObj.id) this.$emit('select', item)
      if (this.couponObj && item.id == this.couponObj.id) this.$emit('select', null)
      this.handleAction(false)
    },
  },
}
</script>

<style lang="scss" scoped>
.bg-color-red {
  background-color: #ff6010 !important;
}

.tips {
  padding-bottom: 0;
  font-size: 24rpx;
  color: #fff;
  font-weight: 400;
}

.f24 {
  font-size: 24rpx;
  margin-left: 8rpx;
}
</style>
